> SMIL Transition

SMIL Transition

Transition 能够为元素生成“淡入淡出”以及“擦除”等效果。

Transition 属于 SMIL 2.0

Transition 是 SMIL 2.0 中的新特性。Transition 不属于 SMIL 1.0 规范的组成部分。

Internet Explorer 6 支持基于 SMIL 2.0 规范的 Transition。Transition 由 <transitionfilter> 元素实现。

属性

<transitionfilter> 元素拥有若干元素,最常用的有:

属性 描述 例子
type 定义 transition 滤镜的类型(参阅 transition 滤镜列表) type="clockWipe"
begin 定义何时开始 transition begin="0s"
mode 定义 transition 模式 mode="in"
from 定义 transition 的开始值 from="0.2"
to 定义 transition 的结束值 to="0.8"

Transition 滤镜

可使用下面的 transition 滤镜:

fade, barnDoorWipe, barWipe, clockWipe, ellipseWipe, fanWipe, irisWipe, 
pushWipe, slideWipe, snakeWipe, spiralWipe, starWipe 

实例:显示 Transition

<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
<?import namespace="t" implementation="#default#time2">
<style>.t {behavior: url(#default#time2)}</style>
</head>
<body>

<t:transitionfilter targetelement="keyb"
type="clockWipe"
begin="keyb.begin" dur="2s" />

<img id="keyb" class="t" src="pic_keyb.jpg" dur="4s"
width="128" height="107" />

</body>
</html>

在上面的例子中,图像将显示 4 秒钟。Transition 滤镜将用 2 秒钟以 "clockWipe" 的方式把图像显示出来。

提示:您必须运行 Internet Explorer 6 来显示这个例子。

TIY

参考手册

W3c0.com 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。W3c0 简体中文版的所有内容仅供测试,对任何法律问题及风险不承担任何责任。 当使用本站时,代表您已接受了本站的使用条款和隐私条款。版权所有,保留一切权利。 鲁ICP备15022115号